<template>
  <div class="permissions-container">
    <!-- 添加权限 -->
    <PageTools>
      <template #right>
        <el-button type="primary" size="mini" @click="handleClick('', 1)">
          添加权限
        </el-button>
      </template>
    </PageTools>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%; margin: 20px 0"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column prop="code" label="标识" />
      <el-table-column prop="description" label="描述" />
      <el-table-column fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="handleClick(scope.row.id, 2)"
          >添加</el-button>
          <el-button type="text" size="small">编辑</el-button>
          <el-button
            type="text"
            size="small"
            @click="del(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 对话框 -->
    <el-dialog :visible.sync="showDialog" title="弹层标题">
      <perDia
        v-if="showDialog"
        ref="perDia"
        :on-success="loadPer"
        @success="showDialog = false"
      />
    </el-dialog>
  </div>
</template>

<script>
// import { transArray2 } from '@/utils'
import { transArray } from '@/utils'
import { getPermissionList, delPermission } from '@/api/permission'
import perDia from './perDia.vue'
export default {
  name: '',
  components: {
    perDia
  },
  data() {
    return {
      tableData: [],
      showDialog: false,
      pid: ''
    }
  },
  computed: {},
  created() {
    this.loadPer()
  },
  methods: {
    async loadPer() {
      const res = await getPermissionList()
      // this.tableData = transArray2(res.data)
      this.tableData = transArray(res.data)
      console.log(this.tableData, res.data, 'loadPer')
    },
    // 添加权限
    handleClick(pid, type) {
      this.showDialog = true
      // 使用ref定义对话框表单中的pid值
      this.$nextTick(() => {
        this.$refs.perDia.formData.pid = pid
        this.$refs.perDia.formData.type = type
      })
    },
    // 删除权限
    async del(id) {
      const res = await this.$confirm('确认删除此权限点吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      if (res === 'confirm') {
        const result = await delPermission(id)
        if (result.code === 10000) {
          this.loadPer()
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.permissions-container {
  padding: 30px 20px;
}
</style>
